/**
 * @description 券码
 */
import style from './styles/App.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
import CouponCode from "./CouponCode";
import ImgCode from "./ImgCode";
import Recharge from "./Recharge";
import Fail from "./Fail";
import Wait from "./Wait";
const Fragment = React.Fragment;
import { Button, ButtonGroup, CheckBox, CheckBoxGroup, Toast } from 'wd-mobile'


import { trade } from "api_zhoujianyi/front/app/order/list";
import { detail } from "api_zhoujianyi/front/app/order";
import { userMark } from "api_zhoujianyi/front/app/order";
import { detail as goodsDetail } from "api_liuhaojie/app/goods";


import wxShare from "commons/wxShare";
import util from "commons/util";

//image
// import sharePic from './images/sharePic.png';

const queryObject = util.parseQueryString();

const Container = (props) => {
    let isChecked = props.userMark == 1 ? true : false
    const checkedChange = (props) => {
        isChecked = !isChecked

        // 查询商品详情
        userMark({
            mark: isChecked ? 1 : 0,
            orderNo: props.orderNo
        }).then(res => {
            Toast.info(isChecked ? '确认使用' : '取消已使用')
        })
        console.log(isChecked)
    }

    console.log(props)

    return (
        <div className={style.container}>
            <div className={style.logo}>
                <div className={style.logoContainer} style={{ backgroundImage: `url(${props.goodsIcon})` }}></div>
            </div>
            { queryObject.orderNo && <CheckBox className={style.checkBox} checked={props.userMark == 1} onClick={() => checkedChange(props)} value={props.index}>已使用</CheckBox>}
            <div className={style.title}><span>{props.goodsName}</span></div>
            <div className={style.subText}>
                <span>
                    {
                        (props.status == "WAIT_PAY" || props.status == "WAIT_DELIVERY") ?
                            "若5分钟内出货失败，系统将自动取消订单" :
                            `售后有效期：${props.autoReceiptTime}`
                    }
                </span>
            </div>
            {
                props.index > 0 && <div className={style.indexContainer}>
                    <span className={style.index}>{props.index}/{props.totalCount}</span>
                </div>
            }
            <div className={style.wrapper}>
                {
                    (props.status == "WAIT_PAY" || props.status == "WAIT_DELIVERY") && <Wait />
                }
                {
                    (props.status == "WAIT_REFUND" || props.status == "REFUNDED" || props.status == "CANCELED") && <Fail />
                }
                {
                    (props.status == "WAIT_RECEIPT" || props.status == "WAIT_MERCHANT" || props.status == "RECEIPTED" || props.status == "WAIT_PLATFORM") && (props.cardType == 1 || props.cardType == 3 || props.cardType == 4) && <CouponCode {...props} />
                }
                {
                    (props.status == "WAIT_RECEIPT" || props.status == "WAIT_MERCHANT" || props.status == "RECEIPTED" || props.status == "WAIT_PLATFORM") && props.cardType == 2 && <ImgCode {...props} />
                }
            </div>
            <div className={style.splitLine}></div>
            <div className={style.useInfo}>
                <div className={style.useInfoTitle}>使用说明</div>
                <div className={style.useInfoValue} dangerouslySetInnerHTML={{ __html: `<div>${props.instructions}</div>` }}></div>
            </div>
        </div>
    )
}

class App extends EntryBase {
    constructor(props) {
        super(props);
        this.state = {
            swiperIndex: 0,
            list: [],
            showDialog: false,
            showShareOrPayLayer: false
        }
        this.timmerTimes = 0;
        this.timmer = null;
    }
    componentDidMount() {
        super.componentDidMount();
        const _App = this;
        this.query();
        if (queryObject.tradeNo) {
            this.timmer = setInterval(() => {
                this.timmerTimes++;// 计数器增加
                this.query();
                if (this.timmerTimes == 4) {
                    clearInterval(this.timmer);
                }
            }, 2000);
        }
    }

    render() {
        let { list, swiperIndex } = this.state;
        return (
            <Fragment>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={style.swipper}>
                        <div className="swiper-wrapper">
                            {
                                this.state.list.map((item, index) => {
                                    if (this.state.list.length > 1) {
                                        item.index = index + 1;
                                        item.totalCount = this.state.list.length;
                                    }
                                    return (
                                        <div key={index} className="swiper-slide">
                                            <Container {...item} index={index} />
                                            <div>
                                                <Button className={style.backToHome} onClick={() => {
                                                    location.href = "./index.html"
                                                }}>返回首页</Button>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {
                    this.state.list.length > 1 && <div className={style.buttons}>
                        <div style={{ padding: '20px 30px' }}>
                            <ButtonGroup radius>
                                <Button disabled={this.state.swiperIndex == 0} className={classnames(style.button)} onClick={() => {
                                    this.setState({
                                        swiperIndex: this.state.swiperIndex - 1
                                    }, () => {
                                        this.swiper.slidePrev();
                                    })
                                }}>上一张</Button>
                                <Button disabled={this.state.swiperIndex == (this.state.list.length - 1)} className={style.button} onClick={() => {
                                    this.setState({
                                        swiperIndex: this.state.swiperIndex + 1
                                    }, () => {
                                        this.swiper.slideNext();
                                    })
                                }}>下一张</Button>
                            </ButtonGroup>
                        </div>
                    </div>
                }
            </Fragment>
        )
    }

    query() {
        // 如果是交易号
        if (queryObject.tradeNo) {
            trade({
                tradeNo: queryObject.tradeNo
            }).then(res => {
                this.setState({
                    list: res.data
                }, () => {
                    if (res.data.length > 0) {
                        if (this.swiper) {
                            this.swiper.update();
                        } else {
                            this.swiper = new Swiper(`.${style.swipper}`, {
                                on: {
                                    init: function () {
                                    },
                                    slideChangeTransitionEnd: function () {
                                        _App.setState({
                                            swiperIndex: this.activeIndex
                                        })
                                    },
                                }
                            })
                        }
                    }
                })

                return res.data[0]
            }).then(data => {
                // 查询商品详情
                goodsDetail({
                    skuId: data.goodsType
                }).then(res => {
                    // 设置分享到商品
                    let shareData = {};
                    let pathNameArr = location.pathname.split("/");
                    pathNameArr.pop();
                    shareData.link = location.origin + pathNameArr.join("/") + "/goods.html" + `#/Detail/${res.data.id}`;
                    shareData.title = `${res.data.skuName}仅需￥${res.data.price}元，已有${res.data.soldNum}人抢购！`;
                    shareData.desc = "数量有限，先到先得。新人更可享受1分钱换购电影券";
                    shareData.imgUrl = res.data.goodsIcon;
                    wxShare(shareData);
                })
            })
        }

        // 如果是订单号
        if (queryObject.orderNo) {
            detail({
                orderNo: queryObject.orderNo
            }).then(res => {
                this.setState({
                    list: [res.data]
                })
                return res.data;
            }).then(data => {
                // 查询商品详情
                goodsDetail({
                    skuId: data.goodsType
                }).then(res => {
                    // 设置分享到商品
                    let shareData = {};
                    let pathNameArr = location.pathname.split("/");
                    pathNameArr.pop();
                    shareData.link = location.origin + pathNameArr.join("/") + "/goods.html" + `#/Detail/${res.data.id}`;
                    shareData.title = `${res.data.skuName}仅需￥${res.data.price}元，已有${res.data.soldNum}人抢购！`;
                    shareData.desc = "数量有限，先到先得。新人更可享受1分钱换购电影券";
                    shareData.imgUrl = res.data.goodsIcon;
                    wxShare(shareData);
                })
            })
        }
    }
}
export default App;